<template>
  <div>
    <div class="top" v-if="info">
      <van-image width="100%" height="100%" :src="url + info.avatar" />
      <div class="touxiang touxs">
        <van-image
          round
          class="imgs"
          width="4rem"
          height="4rem"
          src="http://liufusong.top:8080/img/profile/avatar.png"
        />
        <p>{{ info.nickname }}</p>
        <van-button type="primary" size="mini" class="gobutton" @click="logout"
          >退出</van-button
        >
        <p class="userText">
          编辑个人资料
          <van-icon
            style="margin-top: 17px; margin-left: -5px"
            class="iconfont"
            class-prefix="icon"
            name="xialakuangxiala"
            size="20px"
            color="#ccc"
          />
        </p>
      </div>
    </div>

    <div class="tops" v-else>
      <van-image
        width="100%"
        height="200px"
        src="http://liufusong.top:8080/img/profile/bg.png"
      />
      <div class="touxiang">
        <van-image
          round
          class="imgs"
          width="4rem"
          height="4rem"
          src="http://liufusong.top:8080/img/profile/avatar.png"
        />
        <p>游客</p>
        <van-button type="primary" size="small" class="gobutton" to="/login"
          >去登录</van-button
        >
      </div>
    </div>

    <van-grid clickable :column-num="3" :border="false" class="grids">
      <van-grid-item icon="star-o" text="我的收藏" to="/collect" />
      <van-grid-item icon="wap-home-o" text="我的出租" to="/gorent" />
      <van-grid-item icon="underway-o" text="看房记录" />
      <van-grid-item icon="credit-pay" text="成为房主" />
      <van-grid-item icon="user-o" text="个人资料" />
      <van-grid-item icon="service-o" text="联系我们" />
    </van-grid>
    <van-image
      width="100%"
      height="85"
      src="http://liufusong.top:8080/img/profile/join.png"
    />
  </div>
</template>

<script>
import { user } from '@/api/user'
import { Dialog } from 'vant'
import { removeToken } from '@/utils/storage'
export default {
  name: 'ProfilePage',
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  data () {
    return {
      info: '',
      url: 'http://liufusong.top:8080'
    }
  },
  async created () {
    const data = await user()
    console.log(data)
    this.info = data.body
  },
  methods: {
    logout () {
      this.$dialog
        .confirm({
          title: '标题',
          message: '是否确定退出？'
        })
        .then(() => {
          this.$router.push('/login')
          removeToken()
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
.top {
  position: relative;
  margin-bottom: 10px;
  .touxs {
    width: 320px;
    height: 210px;
    position: absolute;
    top: 170px;
    left: 30px;
    .gobutton {
      width: 60px;
      height: 20px;
      position: relative;
      top: -17px;
      border-radius: 30px;
    }
    .userText {
      font-size: 12px;
      color: #999;
      margin-top: 10px;
    }
  }
}
.touxiang {
  width: 300px;
  height: 160px;
  background-color: #fff;
  margin: auto;
  position: relative;
  top: -50px;
  text-align: center;
  box-shadow: 0 0 3px rgb(161, 160, 160);
  .imgs {
    position: relative;
    top: -25px;
  }
  p {
    margin-top: -10px;
    color: #333;
    font-size: 13px;
    padding-bottom: 20px;
  }
  .gobutton {
    width: 80px;
    border-radius: 5px;
  }
}
.icons {
  position: relative;
  margin-top: 100px;
}
// .grids {
//   //margin-top: -20px;
// }
</style>
